<template>
    <div class="app-container" style="padding: 50px;">
        <div class="grid-content" style="margin-bottom: 20px;">
            <el-card class="box-card">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="按时间筛选">
                        <el-col :span="11">
                            <el-date-picker
                                    v-model="form.startTime"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    align="right"
                                    :picker-options="pickerOptions"
                                    style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                        <el-col :span="2" class="line">到</el-col>
                        <el-col :span="11">
                            <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" align="right"
                                            :picker-options="pickerOptions" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item style="margin-top: 30px;">
                        <el-button type="primary" @click="doSearch">搜索</el-button>
                        <el-button type="warning" @click="resetAll">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="grid-content">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix"><span>当日温度</span></div>
                        <div id="temperatureCharts" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12" style="margin-bottom: 20px;">
                <div class="grid-content">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix"><span>当日湿度</span></div>
                        <div id="humidityCharts" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="grid-content">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix"><span>当日有害气体超标</span></div>
                        <div id="harmfulGasCharts" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'DataAnalyzeCharts',
        data() {
            return {
                resultDataShow: false,
                form: {
                    startTime: '',
                    endTime: ''
                },
                temperatureCharts: null,
                temperatureData: [],
                humidityCharts: null,
                humidityData: [],
                harmfulGasCharts: null,
                harmfulGasData: [],
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date().getTime());
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date.getTime());
                            }
                        },
                        {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date.getTime());
                            }
                        },
                        {
                            text: '30天前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', date.getTime());
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            onSubmit() {
            },
            onCancel() {

            },
            resetAll() {
                this.resultDataShow = false;
                this.form = {startTime: '', endTime: '', gas: false, temperatureGap: [0, 100], humidityGap: [0, 100]};
            },
            doSearch() {
                this.temperatureData = [];
                this.humidityData = [];
                this.harmfulGasData = [];
                this.resultDataShow = true;
                this.$request({
                    url: '/api/sensor/selectSensorDataTable',
                    method: 'post',
                    data: JSON.stringify({
                        startTime: this.form.startTime,
                        endTime: this.form.endTime
                    })
                }).then(res => {
                    try {
                        for (let data of res.data) {
                            this.temperatureData.push([new Date(data.createTime), data.temperature])
                            this.humidityData.push([new Date(data.createTime), data.humidity])
                            if (data.gas === 1) {
                                this.harmfulGasData.push([new Date(data.createTime), '正常'])
                            } else {
                                this.harmfulGasData.push([new Date(data.createTime), '超标'])
                            }
                        }
                        this.initCharts();
                    } catch (e) {
                        console.log(JSON.stringify(e))
                    }
                })
            },
            initCharts() {
                let echarts = require('echarts');
                this.temperatureCharts = echarts.init(document.getElementById('temperatureCharts'));
                this.temperatureCharts.setOption({
                    title: {text: '温度走向图'},
                    tooltip: {},
                    xAxis: {
                        type: 'time',
                        name: '时间'
                    },
                    yAxis: {
                        type: 'value',
                        name: '温度（°C）'
                    },
                    series: [
                        {
                            data: this.temperatureData,
                            type: 'line'
                        }
                    ]
                });
                this.humidityCharts = echarts.init(document.getElementById('humidityCharts'));
                this.humidityCharts.setOption({
                    title: {text: '相对湿度走向图'},
                    tooltip: {},
                    xAxis: {
                        type: 'time',
                        name: '时间'
                    },
                    yAxis: {
                        type: 'value',
                        name: '相对湿度（%）'
                    },
                    series: [
                        {
                            data: this.humidityData,
                            type: 'line'
                        }
                    ]
                });
                this.harmfulGasCharts = echarts.init(document.getElementById('harmfulGasCharts'));
                this.harmfulGasCharts.setOption({
                    title: {text: '有害气体超标散点图'},
                    tooltip: {},
                    xAxis: {
                        type: 'time',
                        name: '时间'
                    },
                    yAxis: {
                        type: 'category',
                        name: '状态',
                        data: ['正常', '超标']
                    },
                    series: [
                        {
                            data: this.harmfulGasData,
                            type: 'scatter'
                        }
                    ]
                });
            }
        },
        mounted() {
            this.initCharts();
        }
    };
</script>

<style scoped>
    .line {
        text-align: center;
    }

    .form-block {
        padding: 0px 20px 0px 20px;
    }
</style>
